import React, { Component } from 'react'
import Tabbar from './Tabbar'
import {HashRouter as Router,Route,Redirect,Switch} from "react-router-dom";
// 主页组件
import Home from "./component/Home/Home"
// 购物车组件
import Cart from "./component/Cart/Cart"
// 我的组件
import My from "./component/My/My"
// 分类组件
import Category from "./component/Category/Category"
//商品详情组件
import GoodDetail from "./component/GoodDetail/GoodDetail"
// 搜索中心组件
import SearchCenter from "./component/SearchCenter/searchCenter"
import GoodList from "./component/GoodList/GoodList"
 class App extends Component {
  render() {
    return (
      <div>
        <Router>
          {/* 
          exact 精准匹配路由
          Switch 只匹配到一个路由
          render 渲染方式会触发全生命周期
          这是一种插槽与vue的一样需在对应的元素this.props.children
           <Tabbar {...props} key={Date.now()}>
                  <My></My>
            </Tabbar>}>
          */}
           <Switch>
             {/* 首页 */}
              <Route exact path='/Home' render={(props)=><Tabbar {...props} key={Date.now()}><Home></Home></Tabbar>}></Route>
              <Route exact path='/Category' render={(props)=><Tabbar {...props} key={Date.now()}><Category key="2"></Category></Tabbar>}></Route>
               {/* 搜索在中心 */}
              <Route exact path="/searchCenter" render={(props) =><SearchCenter> </SearchCenter>}></Route>
               {/* 购物车 */}
              <Route exact path='/Cart' render={(props)=><Tabbar {...props} key={Date.now()}><Cart></Cart></Tabbar>}></Route>
              {/* 个人中心路由 */}
              <Route exact path='/My' render={(props)=><Tabbar {...props} key={Date.now()}><My></My></Tabbar>}></Route>
              {/* 商品详情路由 */}
              <Route exact path="/goodDetail/:goods_id" render={(props)=><GoodDetail></GoodDetail>}></Route>
               <Route exact path="/GoodList/" render={(props)=><GoodList  {...props}></GoodList>}></Route>
              <Redirect to="/Home"></Redirect>
           </Switch>
        </Router>
      </div>
    )
  }
}
export default App;